import React from 'react';
import { Box, Avatar, Typography, Card, CardContent, List, ListItem, ListItemAvatar, ListItemText, Button, TextField } from '@mui/material';

const ProfilePage = () => {
  const [editing, setEditing] = React.useState(false);
  const [userInfo, setUserInfo] = React.useState({
    avatar: 'https://via.placeholder.com/100',
    nickname: '社交用户',
    bio: '分享生活，连接世界'
  });

  const handleEdit = () => setEditing(!editing);

  return (
    <Box sx={{ maxWidth: '1200px', margin: '0 auto', padding: '20px' }}>
      {/* 用户信息展示/编辑区域 */}
      <Card variant="outlined" sx={{ padding: '20px', marginBottom: '30px' }}>
        <Box display="flex" alignItems="center" marginBottom="20px">
          <Avatar src={userInfo.avatar} sx={{ width: 100, height: 100, marginRight: 3 }} />
          <Box>
            {editing ? (
              <TextField
                label="昵称" 
                value={userInfo.nickname}
                onChange={(e) => setUserInfo({...userInfo, nickname: e.target.value})}
                sx={{ marginBottom: 1 }}
              />
            ) : (
              <Typography variant="h5" sx={{ fontWeight: 'bold', color: '#2c3e50' }}>
                {userInfo.nickname}
              </Typography>
            )}
            {editing ? (
              <TextField
                multiline
                rows={3}
                label="个人简介"
                value={userInfo.bio}
                onChange={(e) => setUserInfo({...userInfo, bio: e.target.value})}
              />
            ) : (
              <Typography sx={{ color: '#7f8c8d', marginTop: 1 }}>{userInfo.bio}</Typography>
            )}
          </Box>
        </Box>
        <Button
          variant="contained"
          color="primary"
          onClick={handleEdit}
          sx={{ marginTop: 2 }}
        >
          {editing ? '保存资料' : '编辑资料'}
        </Button>
      </Card>

      {/* 动态列表 */}
      <Card variant="outlined" sx={{ marginBottom: '30px' }}>
        <CardContent>
          <Typography variant="h6" sx={{ color: '#2c3e50', marginBottom: 2 }}>我的动态</Typography>
          <List>
            {[1,2,3].map((item) => (
              <ListItem key={item} sx={{ padding: '10px 16px' }}>
                <ListItemText primary="示例动态内容" secondary="3小时前" />
              </ListItem>
            ))}
          </List>
        </CardContent>
      </Card>

      {/* 好友列表 */}
      <Card variant="outlined" sx={{ marginBottom: '30px' }}>
        <CardContent>
          <Typography variant="h6" sx={{ color: '#2c3e50', marginBottom: 2 }}>好友列表</Typography>
          <List>
            {[1,2,3].map((item) => (
              <ListItem key={item} alignItems="center">
                <ListItemAvatar>
                  <Avatar src="https://via.placeholder.com/40" />
                </ListItemAvatar>
                <ListItemText primary="好友昵称" secondary="最近活跃：2小时前" />
              </ListItem>
            ))}
          </List>
        </CardContent>
      </Card>
    </Box>
  );
};

export default ProfilePage;